
.commands {
	&__item {
		text-align: center;
		color: colour('white');
		display: inline-block;
		position: relative;
		width: 26px;
		height: 26px;
		margin-bottom: 4px;
		margin-right: 6px;
		z-index: 1;

		&__icon {
			padding-top: 7px;
			padding-right: 0 !important;
			font-size: 12px;
			display: inline-block;
		}

		&__background {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding-bottom: 100%;
			background: colour('grey');
			z-index: -1;
			border-radius: 50%;
			opacity: 1;
		}

		&--small {
			width: 20px;
			height: 20px;

			.commands__item__icon {
				padding-top: 5px;
				font-size: 10px;
			}
		}

		&--large {
			width: 32px;
			height: 32px;

			.commands__item__icon {
				padding-top: 7px;
				font-size: 16px;
			}
		}

		&--interactive {
			@include click_feedback(rgba(0,0,0,0.5));
			cursor: pointer;
		}
	}
}
